home *** CD-ROM | disk | FTP | other *** search
/ Programming Languages Suite / ProgramD2.iso / Borland / Borland Pascal with Objects 7.0 / RWDOC.ZIP / BWCCSTYL.RW < prev    next >
Text File  |  1992-10-27  |  12KB  |  329 lines
  1.                            BWCCSTYL.RW
  2.                            ===========
  3.  
  4.  
  5. This guide presents style considerations you can follow when
  6. designing Borland Windows Custom Control (BWCC) dialog boxes for
  7. your Windows-based software.
  8.  
  9.  
  10. 1        Layout issues
  11. ----------------------
  12.  
  13. Before you begin designing your dialogs, you should be aware of
  14. some basic design considerations.
  15.  
  16.  
  17. 1.1      Panels
  18. ---------------
  19.  
  20. Each dialog box has two panels: a Main panel and an Action panel.
  21. The Main panel contains all the elements that are read or
  22. modified when the dialog box is open. The Action panel contains
  23. the push buttons, usually OK, Cancel, and Help.
  24.  
  25.  
  26. 1.2      Fonts
  27. --------------
  28.  
  29. Borland dialogs use 8 point Helvetica Bold. The BWCC dialog
  30. controls look best when you use this font. An 8 point font is
  31. small; using it keeps the size of the your dialogs from growing
  32. too big. Of course, you can use other fonts for other custom
  33. controls.
  34.  
  35.  
  36. 1.3      Group Boxes
  37. --------------------
  38.  
  39. Collect all options that appear in the Main panel into BWCC group
  40. boxes. For example, place a group of related check boxes in a
  41. group box. You should place each single control, such as a file
  42. name text box or combo box, in a group box also. You won't have
  43. to do this with a Borland list box because a list box draws its
  44. own group box.
  45.  
  46.  
  47. 1.4      Push buttons
  48. ---------------------
  49.  
  50. The following are style considerations for push buttons:
  51.  
  52. - Borland's push buttons use glyphs (small bitmapped images). For
  53.   example, a question-mark glyph is used on the Help push button.
  54.   Place the glyph inside the button on the left side.
  55.  
  56. - Use Helvetica (normal, not bold) for the button's text and
  57.   justify it to the right.
  58.  
  59. - Make each push button 39 pixels high for VGA resolution and 30
  60.   pixels high for EGA resolution.
  61.  
  62. - Most push buttons are 63 pixels wide in both VGA and EGA
  63.   resolution. Although you can make a button wider to prevent the
  64.   text and image from overlapping or looking too crowded, you
  65.   should try to restrict the width to 63 pixels if possible.
  66.  
  67.  
  68. 2        Dimension and alignment guidelines
  69. -------------------------------------------
  70.  
  71. The following sections present guidelines for laying out the
  72. controls in a BWCC dialog box.
  73.  
  74.  
  75. 2.1      Arranging the panels
  76. -----------------------------
  77.  
  78. The Main panel of your dialog should be as large as necessary to
  79. contain all the required controls. The Action panel should be
  80. just big enough to contain the push buttons; you can place it
  81. either at the bottom or the right side of the dialog.
  82.  
  83. Your finished dialog should be relatively square. If the Main
  84. panel is wider than it is tall, put the Action panel along the
  85. bottom of your dialog. If the Main panel is taller than it is
  86. wide, put the Action panel on the right side.
  87.  
  88.  
  89. 2.2      Main panel
  90. -------------------
  91.  
  92. You may arrange the group boxes on the Main panel in either a
  93. single column or row, or in an array. Here are some guidelines to
  94. arranging group boxes on the Main panel. You should treat group
  95. titles as part of the group boxes.
  96.  
  97. - Space group boxes 8 dialog units apart, both vertically and
  98.   horizontally.
  99.  
  100. - Leave a margin of 8 dialog units from all edges of the dialog
  101.   to the nearest group box.
  102.  
  103. - In a column of group boxes, make all group boxes the same
  104.   width. The width should accommodate the widest item or title.
  105.   Widen the other group boxes to match.
  106.  
  107. - In a row of group boxes, you may vary the group box heights.
  108.   Align the tops of the group boxes and let the bottoms of the
  109.   group boxes vary.
  110.  
  111. - If some of the group boxes you want to align in a row have
  112.   titles and some don't, align the top of the recessed group
  113.   boxes with each other, not with the title rectangles. For these
  114.   mixed groups of boxes, the margin above group boxes without
  115.   titles should include the space for a title.
  116.  
  117. - If some of the group boxes you want to align in a row are
  118.   taller than others, compute the bottom margin using the tallest
  119.   group box.
  120.  
  121.  
  122. 2.3      Horizontal action panel
  123. --------------------------------
  124.  
  125. An Action panel that appears at the bottom of a dialog is a
  126. horizontal Action panel. It extends the full width of the dialog.
  127. Here are the guidelines:
  128.  
  129. - Make the Action panel tall enough to contain the push buttons
  130.   while leaving a margin of 8 dialog units above and 8 dialog
  131.   units below the push buttons.
  132.  
  133. - Distribute the push buttons evenly along the Action panel,
  134.   leaving a minimum of 8 dialog units between the buttons
  135.   themselves and between the buttons and the left and right edges
  136.   of the dialog.
  137.  
  138.   Try to use the same number of dialog units between each button
  139.   and between the buttons and the left and right edges of the
  140.   dialog. You may put more space between the buttons than between
  141.   the buttons and the edges of the dialog, if necessary, but the
  142.   two margin spaces should be equal and the spaces between the
  143.   buttons should be equal.
  144.  
  145.  
  146. 2.4      Vertical action panel
  147. ------------------------------
  148.  
  149. An Action panel that appears at the right side of a dialog is a
  150. vertical Action panel. It extends the full height of the dialog.
  151. Here are the guidelines:
  152.  
  153. - Make the Action panel wide enough to contain the push buttons
  154.   while leaving a margin of 8 dialog units to right and 8 dialog
  155.   units to the left of the push buttons.
  156.  
  157. - Distribute the push buttons evenly along the Action panel,
  158.   leaving a minimum of 8 dialog units between the buttons
  159.   themselves and between the buttons and the top and bottom edges
  160.   of the dialog.
  161.  
  162.   Try to use the same number of dialog units between each button
  163.   and between the buttons and the top and bottom edges of the
  164.   dialog. You may put more space between the buttons than between
  165.   the buttons and the edges of the dialog, if necessary, but the
  166.   two margin spaces must be equal and the spaces between the
  167.   buttons must be equal.
  168.  
  169.  
  170. 2.5      Group box titles
  171. -------------------------
  172.  
  173. A group box title identifies what a group box contains. By
  174. default, a group box title in a Borland dialog has a gray
  175. background. The following are the guidelines for group boxes:
  176.  
  177. - If a group box contains multiple controls, place the group box
  178.   title just above and touching the top edge of the group box.
  179.  
  180. - If a group box contains a single check box, place the group box
  181.   title just above and touching the top edge of the group box.
  182.  
  183. - If a group box contains a single text box or combo box control,
  184.   either put the title to the left of the control and 4 units
  185.   from the edge of the group box or put it above the control,
  186.   whichever you prefer.
  187.  
  188. - If a group box contains two or more editable text fields or
  189.   combo boxes or both, precede each with a short label.
  190.  
  191. - Align group box titles above the recessed group boxes.
  192.  
  193. - Make all group box titles 9 units high.
  194.  
  195. - Make the titles the same width as the group boxes, including
  196.   the beveled sides.
  197.  
  198.  
  199. 2.6      Group box elements
  200. ---------------------------
  201.  
  202. These suggestions will help you arrange the elements within a
  203. group box:
  204.  
  205. - Distribute controls within a group box vertically every 13
  206.   units from the bottom of one line of text to the bottom of the
  207.   next.
  208.  
  209. - Justify the controls to the left.
  210.  
  211. - Make the left and right margins between the edges of the group
  212.   box and the widest control within it all 4 dialog units wide.
  213.  
  214. - Make the margin between the top of the group box and the first
  215.   control in the group 4 dialog units.
  216.  
  217. - Make the margin between the bottom of the group box and the
  218.   last control in the group 4 dialog units.
  219.  
  220. - If a group box contains two or more editable text fields or
  221.   combo boxes or both, make them the same width. Space them so
  222.   that the bottom of one is 13 units apart from the bottom of the
  223.   next one. Right-justify these controls in the group box 4 units
  224.   from the right edge. Left-justify the titles, leaving a 4 unit
  225.   margin. Make the group box wide enough to leave 4 units between
  226.   the longest title and its control.
  227.  
  228.  
  229. 2.7      Message boxes
  230. ----------------------
  231.  
  232. Like dialog boxes, messages boxes have two panels: a Main panel
  233. and an Action panel.
  234.  
  235. The Main panel of the message box is filled with a single group
  236. box. The group box contains a message glyph and a text region.
  237.  
  238. Here are the guidelines for designing a message box:
  239.  
  240. - Put the glyph on the left side of the group box.
  241.  
  242. - Leave a margin of 8 dialog units on all four sides of the group
  243.   box.
  244.  
  245. - Space the message glyph and the text region 8 dialog units
  246.   apart.
  247.  
  248. - Center the text region vertically, leaving at least 8 dialog
  249.   units between the top and bottom of the text region and the top
  250.   and bottom edges of the dialog.
  251.  
  252. - Place the Action panel at the bottom of your dialog.
  253.  
  254. - Test this layout using your longest message string. If
  255.   necessary, resize the text region accordingly.
  256.  
  257.  
  258. 2.8      Examining your dialog
  259. ------------------------------
  260.  
  261. When Windows calculates dialog units, it rounds the computation.
  262. Rounding errors may affect the appearance of your dialog. Examine
  263. your dialog carefully. These problems have been noted:
  264.  
  265. - A crack between the title text and the top of a gray group box
  266.  
  267. - Obvious uneven spacing in a vertical group of radio buttons or
  268.   check boxes
  269.  
  270. - An inconsistent border width in exposed panel areas
  271.  
  272. Usually, making an adjustment of 1 dialog unit will fix these
  273. problems. Occasionally in a large group of repeating controls,
  274. two or more rounding errors can occur. Sometimes making an
  275. adjustment can improve the layout of your dialog; at other times
  276. you may decide not to make any changes. Use your best judgment.
  277.  
  278. You can't tell how text in controls will appear when you are
  279. designing your dialog. Editable text, large static text fields,
  280. and combo boxes fall into this category. You may have to modify
  281. your original design to be sure text appears correctly without
  282. being clipped at run time.
  283.  
  284.  
  285. 2.9      Using standard push buttons
  286. ------------------------------------
  287.  
  288. The Action panel push buttons usually indicate the end of a
  289. user's work with a dialog, but can also serve as a major
  290. departure from the function of the dialog, such as bringing up
  291. Help with the Help button.
  292.  
  293. An application can also have push buttons that don't result in
  294. closure. With these buttons, the user wants to perform specific
  295. actions but continue working with the dialog. Groups of these
  296. buttons often have related functions.
  297.  
  298. For example, a Search dialog box could have Action panel buttons
  299. for Find Next and Replace.
  300.  
  301. The guidelines for standard buttons are as follows:
  302.  
  303. - Put these push buttons on the Main panel rather than the Action
  304.   panel.
  305.  
  306. - Don't put these push buttons in a group box. Place them
  307.   directly on the surface of the Main panel.
  308.  
  309. - Make all push buttons in a group the same width. They should be
  310.   just wide enough to accommodate the widest text string.
  311.  
  312. - Make the buttons 14 dialog units in height.
  313.  
  314. - Try to restrict text to 20 characters or less.
  315.  
  316. - Lay the buttons out in either a row or a column, depending on
  317.   what looks best in your dialog.
  318.  
  319. - Leave 8 dialog units to the left and right of a column of push
  320.   buttons. The vertical space between the buttons and any other
  321.   controls or borders above or below the buttons should be equal.
  322.  
  323. - Leave 8 dialog units above and below a row of push buttons. The
  324.   horizontal space between the buttons and any other controls or
  325.   borders to the left or right of them should be equal.
  326.  
  327.  
  328.            ========= END OF FILE BWCCSTYL.RW =========
  329.